import React, { PureComponent } from 'react';
import Hot from './component/Hot';
import List from './component/List';
import Recommand from './component/Recommand';
import RightTop from './component/RightTop';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import {
    HomeWrapper,
    HomeLeft,
    HomeRight,
    LoadMore,
    BackTop
} from './style';

// PureComponent 和 immutable.js结合提升组件性能
class Home extends PureComponent {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className="banner-img" alt="" src="https://upload.jianshu.io/admin_banners/web_images/4442/ca32bcb9b25af3549f8fb193bc6320280b327b68.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"/>
                    <Hot></Hot>
                    <List></List>
                    <LoadMore onClick={this.props.handleLoadMore}>加载更多</LoadMore>
                </HomeLeft>
                <HomeRight>
                    <RightTop></RightTop>
                    <Recommand></Recommand>
                    {this.props.showTop ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null}
                </HomeRight>
            </HomeWrapper>
        );
    }

    handleScrollTop () {
        window.scrollTo(0, 0);
    }

    componentDidMount() {
        window.addEventListener('scroll', this.props.changeShowTop);
    }
}

const mapStateToProps = (state) => {
    return {
        showTop: state.get('home').get('showBackTop')
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        handleLoadMore () {
            dispatch(actionCreators.getMoreDataList())
        },
        changeShowTop () {
            if (document.documentElement.scrollTop > 200) {
                dispatch(actionCreators.showTop())
            } else {
                dispatch(actionCreators.hiddeTop())
            }
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);